<script setup>
import HorizontalCategories from '@/components/common/HorizontalCategories.vue'
import { ref, watch, onMounted, inject, computed } from 'vue'
import chatApi from '@/apis/chat'
import { getSlogans } from '@/utils/chat'
import icon from '@/assets/svg/connecting_teams.svg'

const categories = inject('categories')
const categoryActive = ref(0)
const roles = inject('roles')
const rolesShow = ref([])
const slogans = computed(() => getSlogans('visrole'))

const keyword = ref('')
watch(keyword, () => {
  console.log('new', keyword.value)
  roles.value.forEach((role, index) => {
    rolesShow.value[index] = role.name.includes(keyword.value)
  })
})

const switchCategory = (index, category) => {
  console.log('switchCategory', category)
  roles.value.forEach((role, index2) => {
    rolesShow.value[index2] =
      category.id === 0
        ? true
        : category.id === -1
        ? role.favorite === true
        : role.category_id === category.id
  })
}

//收藏
const favorite = async (index) => {
  const item = roles.value[index]
  const apiFunction = item.favorite ? chatApi.role.favorite.delete : chatApi.role.favorite.add
  await apiFunction(item.id, 'visrole')
  item.favorite = !item.favorite
}

onMounted(() => {})
</script>

<template>
  <el-scrollbar>
    <div class="small-page space-y-2 sm:space-y-3">
      <!-- 头部-->
      <div class="font-bold text-2xl text-center px-3">虚拟角色</div>
      <div class="p-2 text-center" v-if="slogans.length > 0">
        <DynamicTyping :texts="slogans" />
      </div>
      <!--分类和搜索-->
      <HorizontalCategories
        v-model="categoryActive"
        :categories="categories"
        @change="switchCategory"
      />
      <div class="mt-4 w-full mx-auto">
        <el-input v-model="keyword" placeholder="搜索" clearable>
          <template #prefix>
            <FontAwesomeIcon icon="search" />
          </template>
        </el-input>
      </div>
      <!--数据-->
      <div class="mt-4 space-y-2">
        <div class="flex flex-wrap justify-between gap-3">
          <template v-for="(role, index) in roles" :key="role.id">
            <div class="assistant-item" v-if="rolesShow[index] !== false">
              <div class="assistant-item-img">
                <RouterLink :to="{ name: 'visroleChat', params: { id: role.id } }">
                  <img :src="role.icon" alt="" />
                </RouterLink>
              </div>
              <div class="assistant-item-name">
                <div class="text-md truncate">{{ role.name }}</div>
                <div class="text-sm space-x-1.5">
                  <el-button type="info" link @click="favorite(index)">
                    <p class="font-normal">
                      <FontAwesomeIcon
                        icon="star"
                        :class="[role.favorite ? 'text-[--el-color-warning]' : '']"
                      />
                      <span class="pl-0.5">{{ role.favorite ? '已收藏' : '收藏' }}</span>
                    </p>
                  </el-button>
                  <RouterLink :to="{ name: 'visroleChat', params: { id: role.id } }">
                    <el-button type="info" link>
                      <p class="font-normal">
                        <FontAwesomeIcon icon="comments" />
                        <span class="pl-0.5">对话</span>
                      </p>
                    </el-button>
                  </RouterLink>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="pc-page">
      <div class="mt-36 w-[90%] mx-auto text-center">
        <span class="text-3xl">虚拟角色</span>
      </div>
      <div class="w-[300px] text-center mx-auto mt-10">
        <img :src="icon" class="w-60 mx-auto" />
      </div>
      <div class="mt-10 w-[300px] mx-auto text-center">
        <p class="text-[--el-text-color-regular] mt-10">
          <FontAwesomeIcon icon="hand-point-left" />
          选择右侧虚拟角色，开始对话。
        </p>
        <el-button type="primary" size="large" v-if="false">
          <template #icon>
            <FontAwesomeIcon icon="hand-point-left" />
          </template>
          开始对话
        </el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.small-page {
  @apply w-full p-3 sm:hidden;
}

.pc-page {
  @apply hidden sm:block;
}

.assistant-list {
  @apply flex flex-wrap justify-between sm:justify-center space-x-2;
}

.assistant-item {
  @apply w-[48%] sm:w-[200px] flex flex-col justify-center items-center bg-[--el-bg-color] rounded-xl shadow-sm hover:shadow-md hover:bg-[--el-bg-color] space-y-4 py-5;
}

.assistant-item-img {
  @apply w-20 h-20 rounded-full overflow-hidden;
}

.assistant-item-name {
  @apply text-center space-y-2 w-full px-3;
}
</style>
